<template>
  <el-dialog
    class="newAdd-content"
    title="编辑注意事项"
    :visible.sync="openedFrame"
    :width="'560px'"
    :before-close="closeFrame"
    :show-close="false"
    :close-on-click-modal="false"
  >
    <span class="edit mb8 layui-btn layui-btn-xs" @click="handleAdd">新增</span>

    <div class="item" v-for="(item, index) in noticesRules">
      <span class="index">{{ index + 1 }}.</span>
      <el-input
        size="small"
        v-model="noticesRules[index]"
        :key="index"
        placeholder="请输入内容"
      >
      </el-input>
      <span class="edit layui-btn layui-btn-xs" @click="handleDelete(index)"
        >删除</span
      >
    </div>

    <div slot="footer" class="dialog-footer">
      <el-button type="cancel" @click="closeFrame">取 消</el-button>
      <el-button type="primary" :disabled="isdisabledFn" @click="preCreateTitle"
        >确 定</el-button
      >
    </div>
  </el-dialog>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
  data() {
    return {
      openedFrame: false,
      isdisabledFn: false,
      minAdmission: 4, // 最小数
      labelWarning: " ", // 请输入4~12之间的整数,
      noticesRules: [],
    };
  },
  computed: {
    ...mapState("page", ["pageData"]),
  },
  methods: {
    ...mapMutations("page", ["reset_pageData"]),
    closeFrame() {
      this.openedFrame = false;
    },
    handleAdd() {
      if (this.noticesRules.length >= 5) {
        this.$message({
          showClose: true,
          message: "最多填写五个注意事项",
          type: "error",
        });
        return;
      }
      this.noticesRules.push("");
    },
    handleDelete(index) {
      this.noticesRules.splice(index, 1);
    },
    preCreateTitle() {
      let answerTitle = this.pageData[0];
      this.pageData.splice(0, 1, {
        ...answerTitle,
        content: {
          ...answerTitle.content,
          noticesRules: this.noticesRules,
        },
      });
      // this.reset_pageData(this.pageData);
      this.closeFrame();
    },
    onOpen(noticesRules = []) {
      this.openedFrame = true;
      this.noticesRules = [...noticesRules];
    },
    changeValueFunc(e) {
      const val = parseInt(e);
      // if (val < this.minAdmission || val > this.maxAdmission || e == '') {
      //   this.labelWarning = '请输入4~' + this.maxAdmission + '之间的整数'
      //   this.isdisabledFn = true
      // } else {
      //   this.labelWarning = ''
      //   this.isdisabledFn = false
      // }
    },
  },
};
</script>

<style lang="less" scoped>
.item-style {
  padding: 10px 0;
}
.demo-input-suffix {
  display: flex;
  position: relative;
  label {
    width: 120px;
    line-height: 37px;
  }
  input {
    height: 30px !important;
    line-height: 30px !important;
    font-size: 14px !important;
    width: 80%;
    display: inline-table;
  }
  .label-Warning {
    color: red;
    position: absolute;
    top: 40px;
    font-size: 12px;
    left: 88px;
  }
}
.padding__inner {
  input.el-input__inner {
    padding: 16px 0;
    font-size: 20px !important;
  }
}

.item {
  display: flex;
  align-items: center;
  margin-bottom: 6px;
  .el-input {
    margin-right: 8px;
  }
  .el-input__inner {
    border: 1px dashed;
  }
}

.dialog-footer {
  display: flex;
  justify-content: center;
}

.index {
  margin-right: 8px;
}
.mb8 {
  margin-bottom: 8px;
}
</style>
